<template>
    <div class="change-box">
        <div class="content-title">商户信息</div>
        <el-row>
            <el-col :span="3" class="item-title">商户编号</el-col>
            <el-col :span="12" class="item-value" v-if="!this.isAdd">
                {{statusData.merchantNo}}
            </el-col>
            <el-col :span="12" v-else>
                <el-input v-model="statusData.merchantNo" style="width:300px; margin-right:10px" @keydown.enter.native="getStastus"></el-input>
                <el-button type="primary" @click="getStastus" v-permission="'MER_CHANGE_APPLY_INFO_INSERT'">查询</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="3" class="item-title">商户费率</el-col>
            <el-col :span="12" class="item-value">
                <table class="rate-table" style="width:950px" v-if="costList">
						<tr>
							<th>业务类型</th>
							<th>卡类型</th>
							<th>T1成本（比例：%，封顶：元）</th>
							<th>T0成本（%）</th>
							<th>T0提现费成本（元）</th>
						</tr>
						<tr v-for="item in costList" :key="item.id">
							<td>{{item.payTypeCode | payType}}</td>
							<td>{{item.cardType | formateCardType}}</td>
							<td>
								<div>
									<span v-if="payTypeCode=='POS'&&item.cardType=='2'">比例：</span>
									<template>{{item.t1Rate}}</template>
								</div>
								<div v-if="payTypeCode=='POS'&&item.cardType=='2'">
									<template>{{item.t1TopFee}}</template>
                                </div>
							</td>
							<td>
								<template>{{item.t0Rate}}</template>
							</td>
							<td>
								<div v-if="payTypeCode=='POS'&&item.cardType=='1'">
									<template>{{item.cashFee}}</template>
									</div>
									<span v-else>-</span>
								</td>
						</tr>
					</table>
            </el-col>
        </el-row>
        <br>
        <div class="content-title">变更申请</div>
        <el-row>
            <el-col :span="3" class="item-title"></el-col>
            <el-col :span="12">
                <table class="rate-table" style="width:950px" v-if="changeMerRateInfo">
						<tr>
							<th>业务类型</th>
							<th>卡类型</th>
							<th>T1成本（比例：%，封顶：元）</th>
							<th>T0成本（%）</th>
							<th>T0提现费成本（元）</th>
						</tr>
						<tr v-for="item in changeMerRateInfo" :key="item.id">
							<td>{{item.payTypeCode | payType}}</td>
							<td>{{item.cardType | formateCardType}}</td>
							<td>
                                <template v-if="item.t1MinRate">
                                    <div>
                                        <span v-if="item.payTypeCode=='POS'&&item.cardType=='2'">比例：</span>
                                        <template v-if="isAdd"><CostInput v-model="item.changeT1Rate" :minVal="item.t1MinRate" :maxVal="item.t1MaxRate"></CostInput></template>
                                        <template v-else>{{item.changeT1Rate}}</template>
                                    </div>
                                    <div v-if="item.payTypeCode=='POS'&&item.cardType=='2'">
                                        <template v-if="isAdd">封顶<CostInput v-model="item.changeT1TopFee" :minVal="item.t1MinTopFee" :maxVal="item.t1MaxTopFee"></CostInput></template>
                                        <template v-else>{{item.changeT1TopFee}}</template>
                                    </div>
                                </template>
                                <template v-else>-</template>
								
							</td>
							<td>
                                <template v-if="item.t0MinRate">
                                    <template v-if="isAdd"><CostInput v-model="item.changeT0Rate" :minVal="item.t0MinRate" :maxVal="item.t0MaxRate"></CostInput></template>
								    <template v-else>{{item.changeT0Rate}}</template>
                                </template>
                                <template v-else>-</template>
								
							</td>
							<td>
								<div v-if="item.payTypeCode=='POS'&&item.cardType=='1'">
									<template v-if="isAdd"><CostInput v-model="item.changeCashFee" :minVal="item.minCashFee" :maxVal="item.maxCashFee"></CostInput></template>
									<template v-else>{{item.changeCashFee}}</template>
									</div>
									<span v-else>-</span>
								</td>
						</tr>
					</table>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="3" class="item-title"></el-col>
            <el-col :span="12">
                <h4>特约商户结算信息变更服务协议:</h4>
                <p>乙方（渠道服务商）申请将该商户结算信息按上表所列费率进行变更 ，并承诺本次修改已告知特约商户，如后续因本次修改造成的任务纠纷，与甲方（收单机构）无关，由乙方承担全部责任！</p>
                <p>乙方声明：甲方已采取合理方式提请其注意本协议的全部条款，并对其内容进行了充分说明。</p>
                <p>乙方自愿同意按照本协议的约定行使权利和履行义务。</p>
                <div><el-checkbox v-model="checked">我已阅读并同意商户变更服务协议</el-checkbox></div>
            </el-col>
        </el-row>
        <br>
        <el-row :gutter="10" class="mb8">
            <el-col :span="8" class="item-title"> </el-col>
            <el-col :span="6">
                <el-button type="primary"
                           @click="submit" v-permission="'MER_CHANGE_APPLY_INFO_INSERT'">
                    申请
                </el-button>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { MerchantApi} from '@/api'
import CostInput from '@/components/costInput'
export default {
    data(){
        return{
            statusData:{merchantNo:''},
            checked: true,
            isAdd: true,
            applyNo:'',
            costList:'',
            changeMerRateInfo:''
        }
    },
    components:{
        CostInput
    },
    created(){
        this.isAdd = this.$route.query.isAdd ? true : false
        this.applyNo = this.$route.query.applyNo
        if(!this.isAdd){
            MerchantApi.merChangeApply.queryChangeApplyDetail(this.applyNo)
                .then(res=>{
                    if(res.success){
                        this.statusData = res.data.merRateChangeApplyDetail
                    }
                })
        }
    },
    methods:{
        async submit(){
            if(!this.checked){
               this.Message.error('请勾选《我已阅读并同意商户费率变更协议》')
                return 
            }
           let result = await MerchantApi.merRateChangeApplyDetail.merRateChangeApply(this.statusData.merchantNo, this.changeMerRateInfo)
           if(result.success){
               this.Message.success('申请成功')
               this.$router.push({
                   name:'merchantChangeApply'
               })
           }
        },
        async getStastus(){
            if(!this.statusData.merchantNo){
                this.Message.error('请输入商户编号')
                return
            }
            let result = await MerchantApi.merRateChangeApplyDetail.queryMerRateChangeApply(this.statusData.merchantNo)
            if(result.success){
                this.costList = result.data.currMerRateInfo
                this.changeMerRateInfo = result.data.changeMerRateInfo
            } else{
                this.Message.error(result.message)
            }
        },
    }
}
</script>